<ngx-auth-block>
  <h2 class="title">系统登录</h2>
  <small class="form-text sub-title">您好! 请使用你的用户名或者邮件登录</small>

  <form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">

    <div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted"
         class="alert alert-danger" role="alert">
      <div><strong>Oh snap!</strong></div>
      <div *ngFor="let error of errors">{{ error }}</div>
    </div>

    <div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted"
         class="alert alert-success" role="alert">
      <div><strong>Hooray!</strong></div>
      <div *ngFor="let message of messages">{{ message }}</div>
    </div>

    <div class="form-group">
      <label for="input-email" class="sr-only">Email地址</label>
      <input name="email" [(ngModel)]="user.email" id="input-email" pattern=".+@.+..+"
             class="form-control" placeholder="Email address" #email="ngModel"
             [class.form-control-danger]="email.invalid && email.touched" autofocus
             [required]="getConfigValue('forms.validation.email.required')">
      <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
        Email不能为空!
      </small>
      <small class="form-text error"
             *ngIf="email.invalid && email.touched && email.errors?.pattern">
        不符合Email地址要求!!
      </small>
    </div>

    <div class="form-group">
      <label for="input-password" class="sr-only">密码</label>
      <input name="password" [(ngModel)]="user.password" type="password" id="input-password"
             class="form-control" placeholder="Password" #password="ngModel"
             [class.form-control-danger]="password.invalid && password.touched"
             [required]="getConfigValue('forms.validation.password.required')"
             [minlength]="getConfigValue('forms.validation.password.minLength')"
             [maxlength]="getConfigValue('forms.validation.password.maxLength')">
      <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
        密码不能为空!
      </small>
      <small
        class="form-text error"
        *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
        Password should contains
        from {{ getConfigValue('forms.validation.password.minLength') }}
        to {{ getConfigValue('forms.validation.password.maxLength') }}
        characters
      </small>
    </div>

    <div class="form-group accept-group col-sm-12">
      <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe">记住密码</nb-checkbox>
      <a class="forgot-password" routerLink="../request-password">忘记密码?</a>
    </div>

    <button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success"
            [class.btn-pulse]="submitted">
      登录
    </button>
  </form>

  <div class="links">

    <ng-container *ngIf="socialLinks && socialLinks.length > 0">
      <small class="form-text">Or connect with:</small>

      <div class="socials">
        <ng-container *ngFor="let socialLink of socialLinks">
          <a *ngIf="socialLink.link"
             [routerLink]="socialLink.link"
             [attr.target]="socialLink.target"
             [attr.class]="socialLink.icon"
             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
          <a *ngIf="socialLink.url"
             [attr.href]="socialLink.url"
             [attr.target]="socialLink.target"
             [attr.class]="socialLink.icon"
             [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
        </ng-container>
      </div>
    </ng-container>

    <small class="form-text">
      不没有账户? <a routerLink="../register"><strong>注册用户</strong></a>
    </small>
  </div>
</ngx-auth-block>
